<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 461.3px;
            height: 461.3px;
            position: relative;
            overflow: hidden;
            /* z-index: 1000; */
        }

        #box a {
            display: inline-block;
            width: 461.3px;
            height: 461.3px;
        }

        #box a img {
            width: 461.3px;
            height: 461.3px;
            transition: all 0.5s linear;
        }

        #over {
            width: 446.1px;
            height: 162.5px;

            position: absolute;
            top: 350px;
            transition: all 0.5s linear;
            z-index: 100;
        }

        #over p:nth-child(1) {
            width: 350px;
            height: 33px;
            font-size: 25px;

            color: #fff;
            margin-left: 40px;
        }

        #over p:nth-child(2) {
            width: 386px;
            height: 32px;

            margin-top: 10px;
        }

        #over p:nth-child(3) {
            width: 70px;
            height: 32px;
            margin-left: 40px;
        }

        #mark {
            width: 461.3px;
            height: 461.3px;

            position: relative;
            top: -460px;
            display: none;
            background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 70%);
            transition: all 0.5s linear;

        }
    </style>
</head>

<body>
    <div id="box">
        <a href="">
            <img src="./imgs/3-mate40-p.jpg" alt="" id="img">
            <div id="over">
                <p>非凡影像，超感智莱卡电影影像</p>
                <p></p>
                <p>了解更多</p>
            </div>
        </a>
        <div id="mark">
        </div>
       </div>
    <script>
        var img = document.getElementById("img")
        var box = document.getElementById("box")
        var over = document.getElementById("over")
        var mark = document.getElementById("mark")
        box.onmouseover = function () {
            over.style.top = 295 + "px"
            img.style.transform = "scale(1.1)"
            mark.style.display = "block"
            console.log("1");
        }
        box.onmouseout = function () {
            console.log("2");
            over.style.top = 350 + "px"
            img.style.transform = "scale(1)"
            mark.style.display = "none"
        }

    </script>
</body>

</html>